<template>
    <div>
        <header>
            <div class="title" v-if="activeName=='first'">软件包</div>
            <div class="title" v-else>OPKG 配置</div>
        </header>
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="动作" name="first">
                    <div class="action_head">
                        <span>无可用软件列表</span>
                        <el-button type="primary" size="small" @click="handleClick">刷新列表</el-button>
                    </div>
                    <div class="progress">
                        <div>空闲状态：83%(671.14MB)</div>
                        <el-progress  :stroke-width="10" :percentage="83"></el-progress>
                    </div>
                    <div class="inputBox">
                        <div class="boxItem">
                            <span>下载并安装软件包:</span>
        
                                <el-input  placeholder="" size="small" clearable style="width:30%"></el-input>
                            
                            
                                <el-button type="primary" size="small">确认</el-button>
                            
                        </div>
                        <div class="boxItem">
                            <span>过滤器:</span>
                            
                                <el-input  placeholder="" size="small" clearable style="width:30%"></el-input>
                            
                            
                                <el-button type="primary" size="small">查找软件包</el-button>

                        </div>

                        <header>
                            <div class="title">状态</div>
                            <el-tabs v-model="activeName2" @tab-click="handleClick">
                                <el-tab-pane label="已安装软件包" name="first">
                                    <el-table :data="installedData"  stripe>
                                        <el-table-column 
                                            prop=""
                                            label=""
                                            width="80">
                                            <template>
                                                <div>
                                                    <el-button type="danger" size="mini">移除</el-button>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column 
                                            prop="name"
                                            label="软件包名称">
                                        </el-table-column>
                                        <el-table-column 
                                            prop="edition"
                                            label="版本">
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="可用软件包" name="second">
                                    <el-table :data="installData" stripe>
                                        <el-table-column
                                            width="80"
                                            prop=""
                                            label="">
                                            <template>
                                                <div>
                                                    <el-button type="primary" size="mini">安装</el-button>
                                                    
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="安装名称"
                                            >
                                            
                                        </el-table-column>
                                        <el-table-column
                                            prop="edition"
                                            label="版本"
                                            >
                                            
                                        </el-table-column>
                                        <el-table-column
                                            prop="size"
                                            label="大小"
                                            >
                                            
                                        </el-table-column>
                                    </el-table>
                                    
                                </el-tab-pane>
                            </el-tabs>
                        </header>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="配置" name="second">
                    <div class="textArea">
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <div class="buttonBox">
                            <el-button type="primary" size="small">提交</el-button>
                            <el-button type="success" size="small">复位</el-button>
                        </div>
                    </div>
                    <div class="textArea">
                        <header>
                            <div class="title">自定义软件源</div>
                            <div class="header_content">自定义软件原地址，例如：私有软件源。此文件在系统升级时将被保留</div>
                        </header>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <div class="buttonBox">
                            <el-button type="primary" size="small">提交</el-button>
                            <el-button type="success" size="small">复位</el-button>
                        </div>
                    </div>
                    <div class="textArea">
                        <header>
                            <div class="title">发行版软件源</div>
                            <div class="header_content">由固件指定的软件源。此处的设置在任何系统升级中都会被保留。</div>
                        </header>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <div class="buttonBox">
                            <el-button type="primary" size="small">提交</el-button>
                            <el-button type="success" size="small">复位</el-button>
                        </div>
                    </div>

                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            activeName:"first",
            activeName2:"first",
            installedData:[
                {
                    name:'6in4',
                    edition:'25-1'
                },
                {
                    name:'adbyby',
                    edition:'0.25.3-5'
                },
                {
                    name:'alsa-lib',
                    edition:'1.2.2-1'
                },
            ],
            installData:[
                {
                    name:'adbyby',
                    edition:'2.7',
                    size:0
                },
                {
                    name:'alsa-lib',
                    edition:'2.11',
                    size:0
                },
                {
                    name:'amule',
                    edition:'3.0.1',
                    size:0
                },
            ]
        }
    },
    methods:{
        handleClick(){
        },
    
    }
}
</script>


<style scoped lang="less">
header{
    font-size: 24px;
    .title{
        color: #000;
        margin-bottom: 20px;
    }
    .header_content{
        color: #999;
        font-size: 13px;
        margin-bottom: 20px;
    }
}
.content{
    box-shadow: 0 0 10px #DEE1E6;
    margin: 30px 0;
    padding: 20px;
    font-size: 12px;
    .content_title{
        font-size: 14px;
        margin-left: 5px;
    }
    .inputBox{
        margin: 20px 0;
        .boxItem{
            // display: flex;
            // justify-content: space-around;
            margin: 10px 0;
            span{
                display: inline-block;
                width: 30%;
                text-align: right;
                margin-right: 10px;
            }
        }
    }
    .action_head{
        span{
            margin-right: 20px;
        }
    }
    .progress{
        width: 20%;
        margin-top:20px ;
    }
    header{
        margin-top: 40px;
    }
    .textArea{
        padding: 10px;
        margin-bottom: 20px;
        textarea{
            width: 100%;
            resize: none;
        }
        .buttonBox{
            float: right;
            margin: 30px 0;
        }
    }
}
</style>